import React from 'react'
import { Card, List, Button, Space, Avatar, Typography, Tag, Popconfirm, message } from 'antd'
import {
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  PlusOutlined,
  UserOutlined,
} from '@ant-design/icons'
import { useFamilyStore } from '../../store/family'
const { Text } = Typography

interface TreeListProps {
  onAddTree: () => void
  onEditTree: (tree: any) => void
  onViewTree: (tree: any) => void
  onDeleteTree: (id: number) => void
}

export const FamilyTreeList: React.FC<TreeListProps> = ({
  onAddTree,
  onEditTree,
  onViewTree,
  onDeleteTree,
}) => {
  const { trees, loading, fetchTrees } = useFamilyStore()

  React.useEffect(() => {
    fetchTrees()
  }, [])

  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">族谱列表</h2>
        <Button type="primary" icon={<PlusOutlined />} onClick={onAddTree}>
          创建族谱
        </Button>
      </div>

      <List
        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4 }}
        dataSource={trees}
        loading={loading}
        renderItem={(tree: any) => (
          <List.Item>
            <Card
              hoverable
              cover={
                <div className="h-32 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                  <Avatar
                    size={64}
                    icon={<UserOutlined />}
                    className="bg-white text-blue-500"
                  />
                </div>
              }
              actions={[
                <button
                  key="view"
                  onClick={() => onViewTree(tree)}
                  className="text-blue-500 hover:text-blue-700"
                >
                  <EyeOutlined /> 查看
                </button>,
                <button
                  key="edit"
                  onClick={() => onEditTree(tree)}
                  className="text-green-500 hover:text-green-700"
                >
                  <EditOutlined /> 编辑
                </button>,
                <Popconfirm
                  key="delete"
                  title="确定要删除这个族谱吗？"
                  onConfirm={() => onDeleteTree(tree.id)}
                  okText="确定"
                  cancelText="取消"
                >
                  <button className="text-red-500 hover:text-red-700">
                    <DeleteOutlined /> 删除
                  </button>
                </Popconfirm>,
              ]}
            >
              <Card.Meta
                title={
                  <Text strong className="text-lg">
                    {tree.name}
                  </Text>
                }
                description={
                  <Space direction="vertical">
                    {tree.description && (
                      <Text type="secondary" ellipsis>
                        {tree.description}
                      </Text>
                    )}
                    <div>
                      <Tag color="blue">
                        根成员: {tree.rootMember?.name || '未设置'}
                      </Tag>
                    </div>
                    <div>
                      <Tag color="green">
                        成员: {tree.members?.length || 0}人
                      </Tag>
                      <Text type="secondary">
                        创建者: {tree.creator?.nickname || tree.creator?.username}
                      </Text>
                    </div>
                  </Space>
                }
              />
            </Card>
          </List.Item>
        )}
      />
    </div>
  )
}

export default FamilyTreeList